<template style="background-color: #f6f6f6">

  <el-card class="box-card" >

    <template #header>
      <div class="card-header">
        <span>申请管理</span>
        <span style="float: right;">
            <el-input
                style="float: left;width: 200px;"
                v-model="search"
                size="default"
                placeholder="输入关键字搜索"/>
            <el-button @click="initUniversity"><el-icon><Refresh /></el-icon></el-button>
          </span>
      </div>
    </template>

    <div style="height: 90%">
      <el-table v-loading="tableLoading"
                row-key="id"
                :data="filterData"
                style="width: 100%; height:90%"
                border stripe >
        <el-table-column prop="room.num" label="会议室号" width="100" align="center"/>
        <el-table-column prop="room.location" label="会议室地址" width="300"  align="center"/>
        <el-table-column prop="applicationName" label="申请人" width="100" align="center"/>
        <el-table-column prop="purpose" label="用途" width="200"  align="center"/>
        <el-table-column prop="applicationStartTime" label="使用时间" width="200" align="center"/>
        <el-table-column prop="applicationEndTime" label="结束时间" width="200" align="center"/>
        <el-table-column prop="createTime" label="申请时间" width="200" align="center"/>
        <el-table-column fixed="right" label="状态" width="90" align="center">
          <template #default="scope">
            <el-tag v-if="scope.row.applicationStatus===0" type="info">待审核</el-tag>
            <el-tag v-if="scope.row.applicationStatus===1" type="success">已通过</el-tag>
            <el-tag v-if="scope.row.applicationStatus===2" type="danger">已驳回</el-tag>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="150" align="center">
          <template #default="scope">
            <el-button :disabled="scope.row.applicationStatus!==0" size="small" type="success" @click="pass(scope.row.id) ">通过</el-button>
            <el-button :disabled="scope.row.applicationStatus!==0" size="small" type="danger" @click="reject(scope.row.id)">驳回</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
          :small="true"
          :disabled="false"
          :background="true"
          layout="prev, pager, next"
          @change="initTable"
          v-model:current-page="currentPage"
          :page-count="pageCount"
      />

    </div>

  </el-card>

  <el-dialog
      v-model="dialogVisible"
      title="反馈"
      width="35%"
      style="text-align: center"
      align-center>

        <el-input
            v-model="form.reason"
            :rows="4"
            type="textarea"
        />

    <template #footer>
      <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button
              v-loading.fullscreen.lock="isLoading"
              type="primary" @click="submitReason">
            确认
          </el-button>
      </span>
    </template>
  </el-dialog>

</template>

<script >

import moment from 'moment';
import { ElMessage } from 'element-plus'
import {Edit, Plus, Refresh} from "@element-plus/icons-vue";
export default {
  components: {Plus, Edit, Refresh},
  data(){
    return{
      currentPage:1,
      pageCount:0,
      tableData:[],
      uniName: '',
      currentUniId: '',
      tableLoading:false,
      search:'',
      dialogVisible:false,
      isLoading:false,
      currentId:'',
      form:{
        reason:''
      },
    }
  },
  computed:{
    filterData(){
      return this.tableData.filter((data) => {
        return !this.search || data.name!=null&&data.name.toLowerCase().includes(this.search.toLowerCase())||data.id===this.search;
      });
    }
  },
  methods : {
    initUniversity(){
      this.tableLoading=true;
      this.currentUniId=localStorage.getItem("uniId");
      this.uniName=localStorage.getItem("uniName");
      this.initTable();
      this.tableLoading=false;
    },
    initTable(){
      this.tableLoading=true;
      this.$http.get("/meeting/room/application?uniId="+this.currentUniId+"&college="+"&page="+this.currentPage+"&size=12&isASC=false")
          .then((response) => {
            console.log(response);
            if(response.data.code===200){
              this.tableData=response.data.data.records;
              this.tableData.forEach((item,index)=>{
                item.applicationStartTime=moment(item.applicationStartTime).format('YYYY-MM-DD HH:mm:ss');
                item.applicationEndTime=moment(item.applicationEndTime).format('YYYY-MM-DD HH:mm:ss');
                item.createTime=moment(item.createTime).format('YYYY-MM-DD HH:mm:ss');
              })
              this.pageCount=response.data.data.pages;
              this.tableLoading=false;
            }
          });
      this.tableLoading=false;
    },
    pass(id){
      let formData = new FormData();
      formData.append("id",id);
      formData.append("userId",localStorage.getItem("userId"));
      formData.append("status",1);
      this.$http.put("/meeting/room/application/audit",formData)
          .then((response) => {
            if (response.data.code===200){
              ElMessage({
                message: '审核成功',
                type: 'success',
              });
              this.initTable();
            }
            else {
              ElMessage.error(response.data.msg);
            }
          });
    },
    reject(id){
      this.dialogVisible=true;
      this.currentId=id;
      this.form.reason='';
    },
    submitReason(){
      this.isLoading=true;
      let formData = new FormData();
      formData.append("id",this.currentId);
      formData.append("userId",localStorage.getItem("userId"));
      formData.append("status",2);
      formData.append("reason",this.form.reason);
      this.$http.put("/meeting/room/application/audit",formData)
          .then((response) => {
            if (response.data.code===200){
              ElMessage({
                message: '反馈成功',
                type: 'success',
              });
            }
            else {
              ElMessage.error(response.data.msg);
            }
            this.dialogVisible=false;
            this.isLoading=false;
          });
    }
  },
  mounted(){
    this.initUniversity();
  }
}
</script>

<style>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.box-card {
  height: 94%;
}
</style>